<!-- StudyPlanEditWindow.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>编辑学习计划</title>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/base.css"/>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<style type="text/css">
			.nav-right-img {
				width: 24px;
				margin-left: 12px;
				margin-top: 8px;
			}
			.redPointMessage {
				width: 8px;
				height: 8px;
				top: 4px;
				left: 30px;
				right: 0px;
			}
			.tabbar {
				height: 40px;
				line-height: 40px;
				text-align: center;
				/*border-bottom: 1px solid #e0e0e0;*/
				background: #fff;
			}
			.tabbar .col {
				font-size: 16px;
			}
			.row {
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
			}
			.col {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
				position: relative;
				overflow: hidden;
			}
			.indicator-super-div {
				width: 100%;
				height: 2px;
				padding: 0 20%;
				overflow: hidden;
			}
			.indicator {
				height: 2px;
				width: 62%;
				background: #18b4ed;
				position: absolute;
				bottom: 0;
				z-index: 2;
			}
			.weui_tabbar {
				width: 100%;
				position: fixed;
				left: 0;
				bottom: 0;
			}
			.hide_class {
				display: none;
			}
			.base_right_item{
				font-size: 16px;
			}
		</style>
	</head>
	<body>
		<div class="base_style_color " id='BarAppearance' style="height: 22px;width: 100%"></div>
		<div class="base_navigation_bar base_style_color">
			<a class="base_left_item" href="#" onclick="backClick()"> <img class="base_back_icon" src="../../image/icon_jiantou.png" alt=""> </a>
			<span id="title_id">课程章节</span>
			<!-- <a class="base_right_item" onclick="onSaveClick()">
				完成
			</a> -->
		</div>
		<div class="base_content_div mui-table-view">
			<div class="bgwhite" style="padding: 0 44px;">
				<div id="selectBar" class="row hightitem tabbar" >
					<div class="col base_dark_grey base_content_font" id="col1" tapmode onclick="tabswitch(1)">
						基本信息
						<div class="indicator-super-div">
							<div class="indicator" id="indicator1"></div>
						</div>
					</div>
					<div class="col base_dark_grey base_content_font" id="col2" tapmode onclick="tabswitch(2)">
						课程
						<div class="indicator-super-div">
							<div class="indicator" id="indicator2"></div>
						</div>
					</div>
					<div class="col base_dark_grey base_content_font" id="col3" tapmode onclick="tabswitch(3)">
						小组
						<div class="indicator-super-div">
							<div class="indicator" id="indicator3"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../../script/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		apiready = function() {
			setupFrameGroup();
		};
		function setupFrameGroup() {
			var y = $('#BarAppearance').height() + $('.base_navigation_bar').height() + $('.base_content_div').height();
			var h = api.winHeight - y;
			var rect = {
				x : 0,
				y : y,
				w : 'auto',
				h : h
			}
			var pageParam = api.pageParam;
			var frames = new Array();
			frames.push({//添加基本信息页
				name : 'StudyCreatPlan_Frame',
				url : 'StudyCreatPlan_Frame.html',
				pageParam : pageParam
			});
			frames.push({//添加课程页
				name : 'StudyPlanAddCourse_Frame',
				url : 'StudyPlanAddCourse_Frame.html',
				pageParam : pageParam
			});
			frames.push({//添加小组页
				name : 'StudyCreatTeamNew_Frame',
				url : 'StudyCreatTeamNew_Frame.html',
				pageParam : pageParam
			});
			api.openFrameGroup({
				name : 'coursePlanTabGroup',
				rect : rect,
				scrollEnabled : false,
				frames : frames
			}, function(ret, err) {
			});
			tabswitch(1);
		}
		function itemClick(itemIndex) {
			if (!$('#item' + itemIndex).hasClass('mui-active')) {
				$('.segment_item').removeClass('mui-active');
				$('#item' + itemIndex).addClass('mui-active');
				setupGroupIndex(itemIndex);
			}
		}
		function tabswitch(index) {
			$('.indicator').attr('style', 'display:none;');
			$('.col').attr('style', 'color:#323232;');
			$('#col' + index).attr('style', 'color:#18b4ed;');
			$('#indicator' + index).attr('style', 'display:block;');
			setupGroupIndex(index - 1);
		}
		function setupGroupIndex(index) {
			api.setFrameGroupIndex({
				name : 'coursePlanTabGroup',
				index : index,
				scroll : false
			});
		}
		function onSaveClick(){
			api.sendEvent({
			    name: 'studyPlanEditFinishNotifi'
			});
		}
		function backClick(){
			api.closeWin();
		}
	</script>
</html>
